<template>
  <div class="common-layout">
    <el-container>
      <el-aside :class="menuCls"><star-aside/></el-aside>
      <el-container>
        <el-header><star-header /></el-header>
        <el-main><star-content /></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import useStore from '@/store'
import { useRoute } from 'vue-router'
import { computed, watch } from 'vue'
import starAside from '@/views/common/menu/StarAside'
import starHeader from '@/views/common/header/StarHeader'
import starContent from '@/views/common/content/StarContent'

const route = useRoute()
const { userStore, menuStore } = useStore()

const menuCls = computed(() => {
  return [{
    'el-aside-compact': userStore.isSidebarCompact
  }]
})

watch(
  () => route.path,
  () => {
    appendNewRoute()
  }
)

const appendNewRoute = async () => {
  const {
    path,
    query,
    name
  } = route
  let title = query.tabName || route.meta.title
  if (!title || title === '') {
    if (menuStore.menuList.length < 1) {
      await menuStore.getMenuList()
    }
    title = getMenuName(menuStore.menuList, path) || '操作'
  }
  menuStore.appendTabRouterList({ path, query, title, name, isAlive: true, meta: route.meta })
}

const getMenuName = (menuList, path) => {
  for (let i = 0; i < menuList.length; i++) {
    const menu = menuList[i]
    if (menu.action === path) {
      return menu.name
    }
    if (menu.children.length > 0) {
      const name = getMenuName(menu.children, path)
      if (name && name !== '') {
        return name
      }
    }
  }
}

</script>

<style lang="less" scoped>
.el-header {
  --el-header-padding: 0 0;
}
.el-aside-compact {
  width: fit-content;
}
.el-aside{
  height: 100vh;
}
</style>
